<template>
	<view class="container">
		<!-- 标签 -->
		<view class="tags">
			<view v-for="(tag, index) in tagList" :key="index" :class="{tag:!selectedTags.includes(tag), active: selectedTags.includes(tag) }"
				@tap="selectTag(tag)">
				<span>{{ tag }}</span>
			</view>
		</view>
		<!-- 视频素材 -->
	</view>
</template>

<script>
	import imageConfig from '@/utils/images.js'
	export default {
		data() {
			return {
				imageUrl:imageConfig.uploadImageUrl,
				tagList: ['视频', '图片', '单板', '双板', '高级道', '中级道', '初级道', '练习区', '其他'],
				selectedTags: [], // 存储选中的标签
			}
		},
		methods: {
			selectTag(tag) {
				if (this.selectedTags.includes(tag)) {
					// 如果已经选中，则取消选中
					this.selectedTags = this.selectedTags.filter((item) => item !== tag);
				} else {
					// 否则，添加到选中列表中
					this.selectedTags.push(tag);
				}
				// 输出选中的标签列表
				// console.log('选中的标签：', this.selectedTags);
			},
		}
	}
</script>

<style lang="less">
	.container {
		padding: 0 18rpx;

		.tags {
			padding: 0 20rpx;
			width: 714rpx;
			height: 37rpx;
			display: flex;
			flex-wrap: wrap;
			font-size: 22rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #A2A2A2;
			.tag {
				margin-top: 21rpx;
				margin-right: 20rpx;
				padding: 0 20rpx;
				// width: 100%;
				height: 37rpx;
				border: 1px solid #A2A2A2;
				border-radius: 18rpx;

				span {
					font-size: 22rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #A2A2A2;
					line-height: 37rpx;
				}
			}
		}

		// 自定义选中标签的样式
		.active {
			margin-top: 21rpx;
			margin-right: 20rpx;
			padding: 0 20rpx;
			height: 37rpx;
			border: 1px solid #64A9FF;
			border-radius: 18rpx;
			span {
				font-size: 22rpx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #64A9FF;
				line-height: 37rpx;
			}
		}
	}
</style>